import React from 'react';
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-mysql";
import "ace-builds/src-noconflict/theme-xcode";
import "ace-builds/src-noconflict/ext-language_tools";

const SqlEditor = ({onChange,value}:any)=>{
 return <AceEditor
 style={{border:'1px solid #eee',width:'100%'}}
  theme="xcode"
  mode="mysql"
  value={value}
  onChange={onChange}
  fontSize={14}
  lineHeight={24}
  showPrintMargin={true}
  showGutter={true}
  highlightActiveLine={true}
  setOptions={{
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    
    enableSnippets: false,
    enableMobileMenu: true,
    showLineNumbers: true,
    tabSize: 2,
    }}
  editorProps={{ $blockScrolling: true }}
/>
}
export default SqlEditor